<!--订单评价-->
<template>
  <div class="container ordercoment">
    <div class="ordercoment-frame" v-if="!loading && commentInfo">
      <div class="product-frame">
        <div class="img-frame">
          <van-image
            class="img"
            fit="cover"
            lazy-load
            :src="commentInfo.product_pic"
          />
        </div>
        <div class="product-panel">
          <p class="product-name">
            {{ commentInfo.product_title }}
          </p>
          <p class="product-type">
            {{ commentInfo.attribute_name }}
          </p>
        </div>
      </div>
      <div class="area-frame">
        <div class="area-title">
          <span style="color: #f9644e; margin-top: 5px">*</span> Evaluation
          content
        </div>
        <textarea
          class="area-panel"
          placeholder="Please input the evaluation content within 300 words"
          maxlength="300"
          v-model="comment.content"
        >
        </textarea>
      </div>
      <div class="area-frame">
        <div class="area-title">Service rating</div>
        <van-rate
          v-model="comment.stars"
          style="margin-top: 0.3rem"
          size="0.7rem"
          color="#F9644E"
        />
      </div>
      <div class="area-frame">
        <div class="area-title">Product photos</div>
        <div class="imgs-frame">
          <van-uploader
            v-model="uploader"
            max-count="3"
            :after-read="afterAvatarUpload"
          />
        </div>
      </div>
      <subBtn title="Submit" @clickBtn="clickBtn" />
    </div>
    <Loading v-else />
  </div>
</template>
<script>
import subBtn from "@/components/basic/subBtn.vue";
import request from "@/services/request";
export default {
  components: {
    subBtn,
  },
  data() {
    return {
      //评价参数
      comment: {
        content: "",
        stars: 5, //星级
        order_id: "",
        product_id: "", //商品id
        imgList: [], //评价上传的商品数量
      },
      uploader: [],
      loading: true,
    };
  },
  computed: {
    commentInfo() {
      return this.$store.state.order.commentInfo;
    },
  },
  activated() {
    if (this.commentInfo) {
      this.comment.order_id = this.commentInfo.order_id;
      this.comment.product_id = this.commentInfo.s_item_id;
      this.comment.content = "";
      this.comment.stars = 5;
      this.comment.imgList = [];
      this.uploader = [];
    } else {
      this.$toast("Evaluation sheet is invalid. Please re launch");
      this.$router.back();
    }
  },
  mounted() {
    this.loading = false;
  },
  methods: {
    afterAvatarUpload(upload) {
      const isJPG = upload.file.type === "image/jpeg";
      const isPNG = upload.file.type === "image/png";
      const isLt2M = upload.file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$toast.fail("Only support JPEG / PNG format pictures!");
      } else if (!isLt2M) {
        this.$toast.fail("Picture size can not exceed 2m!");
      }
      //确定上传
      else {
        let that = this;
        var data = new FormData();
        data.append("file", upload.file);
        data.append("object_type", 30);
        upload.status = "uploading";
        request({
          method: "post",
          url: "/api/home/upload/img",
          config: {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          },
          data: data,
        }).then(function (res) {
          upload.status = "done";
          if (res.data.code == 0 && res.data.data != undefined) {
            that.comment.imgList.push(res.data.data);
          }
        });
      }
      return false; //进组组件的默认上传
    },
    //提交评价
    async clickBtn() {
      if (this.comment.content == "") {
        this.$toast("Please input the evaluation content");
      } else {
        this.tips.startLoadingToast();
        let form = {
          content: this.comment.content,
          order_id: this.comment.order_id,
          product_id: this.comment.product_id,
          stars: this.comment.stars,
          file_id: "",
        };
        for (let i = 0; i < this.comment.imgList.length; i++) {
          form.file_id += this.comment.imgList[i].id + ",";
        }
        form.file_id = form.file_id.substring(0, form.file_id.length - 1);
        let res = await this.$store.dispatch("order/orderComment", form);
        this.tips.closeToast();
        if (res.code == 0) {
          this.$toast(
            "Order evaluation is successful, and it will be displayed after approval"
          );
          this.$store.commit("order/setOrderListRefre", true);
          this.$router.back();
        } else {
          this.$toast.fail(res.msg);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "order.less";
</style>